<!--
 * @Autor: dingxiaolin
 * @Date: 2021-06-10 16:45:57
 * @LastEditors: dingxiaolin
 * @LastEditTime: 2021-07-27 15:45:48
-->
<template>
    <a-spin :spinning="spinning">
        <a-tree
            v-if="props.treeData.length"
            style="min-height: 40px"
            :tree-data="props.treeData"
            :replace-fields="replaceFields"
            :defaultExpandAll="true"
            :defaultExpandedKeys="defaultExpandedKeys"
            @select="handleClick"
        />
        <a-empty :image="simpleImage" v-else />
    </a-spin>
</template>

<script lang='ts'>
import { defineComponent, PropType, reactive, toRefs, ref, computed, nextTick, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from '@/store'
import { Empty } from 'ant-design-vue'
import { getOrgTree } from '@/api/system/user'

export default defineComponent({
    name: 'orgTree',
    components: {},
    props: {
        treeData: {
            type: Array,
            default: []
        },
        selfLoading: {
            type: Boolean,
            default: false
        }
    },
    emits: ['emitId'],
    setup(props, ctx) {
        const router = useRouter()
        const store = useStore()
        const state = reactive({
            treeData: [],
            defaultExpandedKeys: [],
            spinning: false,
            replaceFields: {
                key: 'id'
            }
        })
        onMounted(() => {
            //   if (props.selfLoading) {
            //     state.spinning = true
            //     getOrgTree().then((res) => {
            //       state.spinning = false
            //       state.treeData = res
            //     })
            //   }
        })
        /**
         * 点击左侧机构树查询列表
         */
        function handleClick(e) {
            ctx.emit('emitId', e.toString())
        }
        return {
            ...toRefs(state),
            props,
            handleClick,
            simpleImage: Empty.PRESENTED_IMAGE_SIMPLE
        }
    }
})
</script>

<style lang='scss' scoped>
:deep(.ant-tree-title) {
    width: 120px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
}
</style>
